// 这是商家销量统计的横向柱状图
<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>

<script>
export default {
    data(){
        return{
          chartInstance:null,
          allData:null, //服务器放回的数据
          currentPage:1,//当前显示的页数
          totalPage:0,//一共有多少页
          timeId:null //定时器标识
        }
    },
    destroyed(){
      clearInterval(this.timeId)
      //在组件销毁的时候,将监听器取消掉
      window.removeEventListener('resize',this.screenAdapter)
    },
    mounted(){
      this.initChart()
      this.getData()
      window.addEventListener('resize',this.screenAdapter)
      //在页面加载完成的时候,主动进行屏幕的适配
      this.screenAdapter()
    },
    methods:{
      //初始化echartsinstance对象
      initChart(){
        this.chartInstance =  echarts.init(this.$refs.seller_ref,'chalk')
        //对图表初始化配置的控制
        const initOption = {
          title:{
            text:'┃ 商家销售统计',
            left:20,
            top:25
          },
          grid:{
            top:'20%',
            left:'3%',
            right:'6%',
            bottom:'5%',
            containLabel:true
          },
          xAxis:{
            type:'value'
          },
          yAxis:{
            type:'category',
          },
          tooltip:{
            trigger:'axis',
            axisPointer:{
              type:'line',
              z:0,
              lineStyle:{
                color:'#2D3443'
              }
            }
          },
          series:[
            {
              type:'bar',
              label:{
                show:true,
                position:'right',
                textStyle:{
                  color:'white'
                }
              },
              itemStyle:{
                //指明颜色渐变的方向
                //指明不同百分比之下的颜色的值
                 color : {
                   type: "linear",
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 0,
                      colorStops: [
                        {
                           offset:0,
                           color:'#5052EE'// 0% 处的颜色
                        },
                        {
                          offset:1,
                          color:'#AB6EE5' // 100% 处的颜色
                        }
                      ],
                      globalCoord: false
                 }
                //  } color: new this.$echarts.graphic.LinearGradient(0,0.1,0,[
                //   //百分之零状态下的颜色值
                //   {
                //     offset:0,
                //     color:'#5052EE'
                //   },
                //   //百分之百状态下的颜色值
                //   {
                //     offset:1,
                //     color:'#AB6EE5'
                //   }
                // ])
              }
            }
          ]
        }
        this.chartInstance.setOption(initOption)
        //对图表对象进行鼠标对象的事件监听
        this.chartInstance.on(`mouseover`,()=>{
          clearInterval(this.timeId)
        })
        this.chartInstance.on(`mouseout`,()=>{
          this.startInterval()
        })
      },
      //获取服务器的对象
      async getData(){
        //http:127.0.0.1:8888/api/seller
        const {data: ret} =  await this.$http.get('seller')
        this.allData =ret
        // 对数据排序
        this.allData.sort((a,b)=>{
          return a.value-b.value  //从小到大进行排序
        })
        //每五个元素显示一页
        this.totalPage = this.allData.length % 5 === 0 ? this.allData.length/5:this.allData.length/+1
        this.updateChart()
        //启动定时器
        this.startInterval()
      },
      //更新图表
      updateChart(){
        const start = (this.currentPage-1)*5  //0
        const end = this.currentPage*5  //5
        const showData = this.allData.slice(start,end)
        const sellerNames = showData.map((item)=>{
          return item.name
        })
        const sellerValues = showData.map((item)=>{
          return item.value
        })
        const dataOption = {
          yAxis:{
            data: sellerNames
          },
          series:[
            {
              data:sellerValues,
            }
          ]
        }
        this.chartInstance.setOption(dataOption)
      },
      startInterval(){
        if(this,this.timeId){
          clearInterval(this.timeId)
        }
        this.timeId = setInterval(()=>{
          this.currentPage++
          if(this.currentPage>this.totalPage){
            this.currentPage=1
          }
          this.updateChart()
        },3000)
      },
      //当浏览器的大小发生变化的时候,会调用的方法,来完成屏幕的适配
      screenAdapter(){
        const titleFontSize =  this.$refs.seller_ref.offsetWidth/100*3.6
        //和分辨率大小相关的配置项
        const adapterOption ={
           title:{
            textStyle:{
              fontSize:titleFontSize
            }
          },
          tooltip:{
            axisPointer:{
              lineStyle:{
                width:titleFontSize,
              }
            }
          },
          series:[
            {
              barWidth:titleFontSize,
              itemStyle:{
                barBorderRadius:[0,titleFontSize/2,titleFontSize/2,0]
              }
            }
          ]
        }
        this.chartInstance.setOption(adapterOption)
        //手动的调用图表对象的resize 才能产生效果
        this.chartInstance.resize()
      }

    }
}
</script>

<style>

</style>